<script setup lang="ts">

const RoiState = reactive({
  // 销售价格
  salePrice: undefined,
  // 商品成本
  costPrice: undefined,
  // 平台服务加点
  platformServicePoint: undefined,
  // 平均运费
  averageFreight: undefined,
  // 赠品成本
  giftCost: undefined,
  // 退款率
  refundRate: undefined,
  // 其他成本
  otherCost: undefined,
});
const PpcState = reactive({
  // 保本ROI
  roi: undefined,
  // 销售价格
  salePrice: undefined,
  // 点击转化率
  clickConversionRate: undefined,
});
// 利润
const income = computed(() => {
  const {salePrice, costPrice} = RoiState;
  if (salePrice && costPrice) {
    // 利润 = 销售价格 - 商品成本 - (销售价格*平台服务加点/100) - 平均运费 - 赠品成本 - (总利润*退款率/100) - 其他成本  如果有undefined，就不计算
    return salePrice - costPrice - (salePrice * (RoiState.platformServicePoint || 0) / 100) - (RoiState.averageFreight || 0) - (RoiState.giftCost || 0) - ((salePrice - costPrice - (salePrice * (RoiState.platformServicePoint || 0) / 100) - (RoiState.averageFreight || 0) - (RoiState.giftCost || 0)) * (RoiState.refundRate || 0) / 100) - (RoiState.otherCost || 0);
  }
  return 0;
});
const ROIValue = computed(() => {
  const {
    salePrice,
    costPrice,
    platformServicePoint,
    averageFreight,
    giftCost,
    refundRate,
    otherCost,
  } = RoiState;
  if (salePrice && costPrice) {
    // Roi = 销售价格 / 利润
    const result = salePrice / income.value;
    return result.toFixed(2);
  }
  return 0;
});
const PPCValue = computed(() => {
  const {roi, salePrice, clickConversionRate} = PpcState;
  if (roi && salePrice && clickConversionRate) {
    // PPC = (销售价格 / 保本ROI / 点击转化/  100)
    const result = salePrice / roi / clickConversionRate / 100;
    return result.toFixed(2);
  }
  return 0;
});
</script>

<template>

  <a-row type="flex" :gutter="10">
    <a-col flex="1">
      <a-card :body-style="{
        padding:'10px'
      }"
      >
        <div class="title">
          保本ROI计算
        </div>
        <div class="items">
          <a-input v-model:value="RoiState.salePrice" placeholder="必填" size="small" addon-before="销售价格"
                   addon-after="元" allow-clear
          />

          <a-input v-model:value="RoiState.costPrice" placeholder="必填" size="small" addon-before="商品成本"
                   addon-after="元" allow-clear
          />

          <a-input-number max="100" min="0" v-model:value="RoiState.platformServicePoint" placeholder="选填"
                          size="small"
                          addon-before="平台服务加点"
                          addon-after="%" allow-clear
          />

          <a-input v-model:value="RoiState.averageFreight" placeholder="选填" size="small" addon-before="平均运费"
                   addon-after="元" allow-clear
          />

          <a-input v-model:value="RoiState.giftCost" placeholder="选填" size="small" addon-before="赠品成本"
                   addon-after="元" allow-clear
          />

          <a-input-number max="100" min="0" v-model:value="RoiState.refundRate" placeholder="选填" size="small"
                          addon-before="退款率"
                          addon-after="%" allow-clear
          />

          <a-input v-model:value="RoiState.otherCost" placeholder="选填" size="small" addon-before="其他成本"
                   addon-after="元" allow-clear
          />
        </div>
        <template #actions>
          <div class="footer">
            <div>保本ROI</div>
            <div class="value">{{ ROIValue }}</div>
            <div>请保持ROI大于保本ROI以免亏损</div>
          </div>
        </template>
      </a-card>
    </a-col>
    <a-col flex="1">
      <a-card style="height: 100%;" :body-style="{
      padding:'10px',
      height: 'calc(100% - 42px)'
      }"
      >
        <div class="title">
          保本PPC (点击花费) 计算
        </div>
        <div class="items">
          <a-input-number max="100" min="0" v-model:value="PpcState.roi" placeholder="必填" size="small"
                          addon-before="保本ROI"
                          addon-after="%" allow-clear
          />
          <a-input v-model:value="PpcState.salePrice" placeholder="必填" size="small" addon-before="销售价格"
                   addon-after="元" allow-clear
          />
          <a-input-number max="100" min="0" v-model:value="PpcState.clickConversionRate" placeholder="必填" size="small"
                          addon-before="点击转化率"
                          addon-after="%" allow-clear
          />
        </div>

        <template #actions>
          <div class="footer">
            <div>保本PPC</div>
            <div class="value">{{ PPCValue }}</div>
            <div>请保持PPC小于保本PPC以免亏损</div>
          </div>
        </template>
      </a-card>
    </a-col>
  </a-row>
</template>

<style scoped>
.title {
  font-size: 16px;
  color: #222;
  padding-bottom: 10px;
}

.footer {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #f5f7fa;
  font-size: 12px;
  margin: -12px 0;
  color: #444;

  .value {
    width: 80px;
    text-align: center;
    background-color: #fff;
    font-size: 14px;
    color: #1677ff;
  }
}

.items {
  padding: 10px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
</style>
